{% extends "base.html" %}
{% block title %}LISN Data:::::{% endblock %}
{% block extra_head %}
<link rel="stylesheet" type="text/css" media="all" href="{{ STATIC_URL }}css/daterangepicker-bs3.css" />

{% endblock %}

{% block dataactive %}active{% endblock %}

{% block content-title %}DATA{% endblock %}
{% block content-suptitle %}Download{% endblock %}

{% block content %}
      <form name="form" id="form" method="GET">            
      <div class="input-group">
        <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
          <select style="width: 200px" name="itype" id="itype" class="form-control">
            <option value="0" selected>Select Instrument</option>
            <option value="-" disabled>----------</option>
			{% for item in itypes %}
			  {% if item.alias != "products" %}
			    {% if itype %}
				  {% if itype.id == item.id %}
			         <option value="{{ item.alias }}" selected>{{ item.name }}</option>
  				  {% else %}
	  		         <option value="{{ item.alias }}">{{ item.name }}</option>
		  		  {% endif %}
			    {% else %}
			         <option value="{{ item.alias }}">{{ item.name }}</option>
			    {% endif %}
			  {% endif %}   
			{% endfor %}
			<option value="-" disabled>----------</option>
			{% if itype.alias == "products" %}
			  <option value="products" selected>Multi-Instrument</option>
			{% else %}
			  <option value="products">Multi-Instrument</option>
			{% endif %}
          </select>  
      </div>
      <br>
      <div class="input-group">
        <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
          <select style="width: 200px" name="dtype" id="dtype" class="form-control">
            <option value="0" selected>Select Data Type</option>
            <option value="-" disabled>----------</option>
			        {% for item in dtypes %}
			            {% if dtype %}
					        {% if dtype.id == item.id %}
			<option value="{{ item.alias }}" selected>{{ item.name }}</option>
					        {% else %}
			<option value="{{ item.alias }}">{{ item.name }}</option>
					        {% endif %}
				        {% else %}
			<option value="{{ item.alias }}">{{ item.name }}</option>
				        {% endif %}
			        {% endfor %}
            </select> 
      </div>      
      <br>
      <div class="input-group">
        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
          <input type="text" style="width: 200px" name="daterange" id="daterange" class="form-control" value="{{dt1}} - {{dt2}}"> 
      </div>
      <br>
      <div class="panel-group" id="accordion"> 
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                  Networks
                </a>
                <a id="networks" name="networks" href="#networks"></a>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse {{network.collapse}}">
              <div class="panel-body">
                  <fieldset>
                  <div class="checkbox"><label><input id="networks" name="networks" class="check_all_networks" type="checkbox" {{ network.check }}>All</label></div>
                  {% for item in networks %}
                  <div class="col-sm-3">
				  <div class="checkbox"><label><input name="N_{{item.network}}" type="checkbox" {{ item.check }} onclick="update_page();">{{ item.network }}</label></div>
				  </div>
			      {% endfor %}
			      </fieldset>
              </div>
            </div>
          </div>          
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                  Countries
                </a>
                <a id="countries" name="countries" href="#countries"></a>
              </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse {{country.collapse}}">
              <div class="panel-body">
                <fieldset>
                <div class="checkbox"><label><input id="countries" name="countries" class="check_all_countries" type="checkbox" {{ country.check }}>All</label></div>
                {% for item in countries %}
                <div class="col-sm-3">
				<div class="checkbox"><label><input name="C_{{item.country}}" type="checkbox" {{ item.check }} onclick="update_page();">{{ item.country }}</label></div>
				</div>
			    {% endfor %}
			    </fieldset>
              </div>
            </div>
          </div>          
      </div><!--/.div-accordion -->
      <div class="btn-group col-md-2">
        <button type="button" class="btn btn-sm btn-primary btn-block" id="bt_search" name="bt_search">Search</button>
      </div>      
      <br>
      {% if search %}
      <div class="page-header">
        <h1 id="results"><small>Results</small></h1>
      </div>
          {% if stations|length > 0 %}
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                  Stations
                </a>
                <a id="stations" name="stations" href="#stations"></a>
              </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse {{station.collapse}}">
              <div class="panel-body">
                <fieldset>
                <div class="checkbox"><label><input id="stations" name="stations" class="check_all_stations" type="checkbox" {{ station.check }}>All</label></div>
                {% for item in stations %}
                <div class="col-sm-3">
				<div class="checkbox"><label class="label-tooltip" title="{{item.code|upper}}"><input name="S_{{item.code}}" type="checkbox" {{ item.check }}>{{ item.name }}</label></div>
				</div>
			    {% endfor %}
			    </fieldset>
              </div>
            </div>
          </div>
          <br>	      
	      <div class="btn-group col-md-2">
	        <button type="button" class="btn btn-sm btn-primary btn-block" id="bt_add" name="bt_add">Add to Cart</button>
	      </div>
	      <br>
          {% endif %}      
      {% endif%}
      </form>
{% endblock %}
{% block sidebar%}
{% include "sidebar_news.html"%}
{% include "sidebar_cart.html"%}
{% endblock %}

{% block extra_js%}
<script src="/static/js/moment.min.js"></script>
<script src="/static/js/daterangepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {

	$('#daterange').daterangepicker({ format: 'YYYY/MM/DD' });    

	$('#itype').change(function(){
		if($(this).val() != "0"){
    		location.href="{{ ROOT_URL }}/data/download/"+$(this).val()+"/?daterange="+$("#daterange").val();
        }
    });
	
	$('#dtype').change(function(){
		if($(this).val() != "0"){
    		location.href="{{ ROOT_URL }}/data/download/{{ itype.alias }}/"+$(this).val()+"/?daterange="+$("#daterange").val();
        }
    });

	$('.check_all_networks').on('click', function () {
	    $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
	    //update_page();
	});

	$('.check_all_countries').on('click', function () {
	    $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
	    //update_page();
	});

	$('.check_all_stations').on('click', function () {
	    $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
	});

	$('.label-tooltip').tooltip();
	
	$('#bt_search').click(function(){
		var input = $("<input>")
		.attr("name", "search")
		.attr("id", "search")
		.attr("type", "hidden")
		.val("search");
	    $('#form').append($(input));
		if($('#itype').val()==0){
			$('#form').attr('action', "{% url 'apps.data.views.show_data' %}");
		}else if($('#dtype').val()==0){
			$('#form').attr('action', "{% url 'apps.data.views.show_data' itype.alias %}");
		}else{
			$('#form').attr('action', "{% url 'apps.data.views.show_data' itype.alias dtype.alias %}#results");			
		}
		$('#form').submit();
	});
	
	$('#bt_add').click(function(){
		var input = $("<input>")
		.attr("name", "csrfmiddlewaretoken")
		.attr("type", "hidden")
		.val("{{csrf_token}}");
	    $('#form').append($(input));
		$('#form').attr('action', "{% url 'apps.data.views.add_data' itype.alias dtype.alias %}#results");
		$('#form').attr('method', "POST");
		$('#form').submit();		
	});
	
	$('button[name=bt_remove]').click(function(){
		var input1 = $("<input>")
		.attr("name", "csrfmiddlewaretoken")
		.attr("type", "hidden")
		.val("{{csrf_token}}");
	    $('#form').append($(input1));
		var input2 = $("<input>")
		.attr("id", "remove")
		.attr("type", "hidden")
		.attr("name", "remove")
		.val($(this).val());
	    $('#form').append($(input2));
	    if($('#itype').val()==0){
			$('#form').attr('action', "{% url 'apps.data.views.show_data' %}");
	    }else if($('#dtype').val()==0){
	    	$('#form').attr('action', "{% url 'apps.data.views.show_data' itype.alias %}");
	    }else{
	    	$('#form').attr('action', "{% url 'apps.data.views.show_data' itype.alias dtype.alias %}");
	    }
	    $('#form').attr('method', "POST");
		$('#form').submit();
	});
	
});

function update_page(){
	$('#form').attr('action', "{% url 'apps.data.views.show_data' itype.alias dtype.alias %}");
	$('#form').submit();
};

</script>
{% endblock %}